<template>
  <div class="cartList">
    <!-- 自定义刷新提示 start -->
    <van-pull-refresh class="auto-refresh" v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
      <!-- <p>刷新次数: {{ count }}</p> -->

      <!-- 有商品的时候 -->
      <div class="cart-list-box" v-if="$store.state.cart.cartList.length>0">
        <div class="cart-item" v-for="(item,index) in cartList" :key="index">
          <div class="item-check" @click="checkItem(item.id)">
            <van-checkbox v-model="item.isCompleted" />
          </div>
          <img class="item-img" v-lazy="item.pictUrl" alt="">
          <div class="item-info">
            <p class="g-store">
              {{item.shopTitle}}
              <van-icon name="arrow" />
            </p>
            <p class="item-title">{{item.title}}</p>
            <div class="item-count">
              <span class="item-price">{{item.price | gpricefmt}}</span> &nbsp;&nbsp;
              <van-stepper v-model="item.count" theme="round" button-size="22" disable-input />&nbsp;&nbsp;
              <span class="item-del" @click="delGoods(item.id)">删除</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 没商品的时候 -->
      <div class="no-goods" v-else>
        <p>您当前还未选购商品~</p>
      </div>

    </van-pull-refresh>
    <!-- 自定义刷新提示 end -->

    <!-- <van-notice-bar left-icon="volume-o" text="疫情期间, 物流配送慢, 还请小主耐心等待~" /> -->

    <van-submit-bar :price="checklPrice*100" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="checkBtn" @click="checkHandle(checkBtn)">全选</van-checkbox>
      <template #tip>
        疫情期间, 物流配送慢, 还请小主耐心等待~
        <!-- , <span @click="onClickEditAddress">修改地址</span> -->
      </template>
    </van-submit-bar>
  </div>
</template>
<script>
import { Toast } from 'vant'
import { mapState, mapGetters } from 'vuex'
export default {
  data() {
    return {
      count: 0,
      isLoading: false,
      cartList: this.$store.state.cart.cartList // 在这获取数据比较慢
    }
  },
  created() {
    this.$store.commit('cart/SET_ALL_CHECK', this.checkAll)
  },
  computed: {
    ...mapState({
      checkBtn: state => state.cart.checkBtn
    }),
    ...mapGetters({
      checklPrice: 'cart/getCheckCartPrice',
      btnCheck: 'cart/getBtnCheck',
      checkAll: 'cart/getAllCheck'
    })
  },
  watch: {
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        Toast('刷新成功')
        this.isLoading = false
        this.count++
      }, 1000)
    },
    onSubmit() {
      this.$store.commit('cart/SET_GOODS_ORDER')
    },
    checkItem(id) {
      this.$store.commit('cart/SET_BTN_CHECK', id)
    },
    checkHandle(check) {
      this.$store.commit('cart/SET_GOODS_STATE', check)
    },
    delGoods(id) {
      if (confirm('您确认要删除吗?')) {
        this.$store.commit('cart/DEL_GOODS', id)
      }
    }
  }
}
</script>
<style lang="scss" >
.cartList {
  .cart-list-box {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 10px 0;
    .cart-item {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-bottom: 15px;
      box-sizing: border-box;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 6px;
      .item-check {
        flex: 0.3;
        display: flex;
        justify-content: center;
      }
      .item-img {
        box-sizing: border-box;
        padding: 10px;
        height: 100px;
        display: flex;
        justify-content: center;
      }
      .item-info {
        flex: 1;
        .g-store {
          margin-top: 10px;
          font-size: 14px;
          i {
            color: #999;
          }
        }
        .item-title {
          margin: 8px 0 15px 0;
          font-size: 14px;
        }
        .item-count {
          display: flex;
          .item-price {
            color: #ff0092;
          }
          .item-del {
            font-size: 14px;
            color: #888;
          }
        }
      }
    }
  }
  .no-goods {
    padding: 10px 0;
    text-align: center;
    color: #888;
  }
  .auto-refresh {
    padding-bottom: 100px;
  }
}
</style>